<template>
	<el-dialog
		v-loading="state.loading"
		width="99%"
		:close-on-click-modal="false"
		v-model="dialogVisible"
		:title="state.title"
		destroy-on-close
		:before-close="handleClose"
	>
		<div id="printContent">
			<svg id="barcode"></svg>
			<h2 class="print-title">按单收货</h2>
			<el-form :model="state.infoData" :label-width="100">
				<el-row>
					<template v-for="(item, index) in state.mainInfoList">
						<el-col :span="8" v-if="index === 2"></el-col>
						<el-col :span="8">
							<el-form-item :label="item.label + '：'" :prop="item.value">
								<span v-if="item.value === 'teamName' || item.value === 'companyName'" style="font-weight: 600">
									{{ state.infoData[item.value] || '-' }}
								</span>
								<span v-else-if="item.value === 'nowTime'">
									{{ formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS') }}
								</span>
								<span v-else-if="item.value === 'store'"> {{ state.infoData.storeCode || '-' }} / {{ state.infoData.marketCode || '-' }} </span>
								<span v-else-if="item.value === 'busType'">
									<template v-for="bus in inbound_bus_type">
										{{ bus.value === state.infoData.busType ? bus.label : '' }}
									</template>
								</span>

								<span v-else>
									{{ state.infoData[item.value] || '-' }}
								</span>
							</el-form-item>
						</el-col>
					</template>
				</el-row>
			</el-form>

			<!--   打印    -->
			<table class="my-table" style="margin: 0 auto; border: 1px solid #dfdfe1; border-collapse: collapse; width: 100%; margin-top: 20px">
				<thead>
					<tr>
						<th style="border: 1px solid #dfdfe1; border-collapse: collapse">序号</th>
						<th style="border: 1px solid #dfdfe1; border-collapse: collapse">图片</th>
						<th style="border: 1px solid #dfdfe1; border-collapse: collapse">产品信息(产品名称/SKU)</th>
						<th style="border: 1px solid #dfdfe1; border-collapse: collapse">备货平台</th>
						<th style="border: 1px solid #dfdfe1; border-collapse: collapse">MSKU/FNSKU</th>
						<th style="border: 1px solid #dfdfe1; border-collapse: collapse">属性</th>
						<th style="border: 1px solid #dfdfe1; border-collapse: collapse">应收数量</th>
						<th style="border: 1px solid #dfdfe1; border-collapse: collapse">实收数量</th>
						<th style="border: 1px solid #dfdfe1; border-collapse: collapse">良品量</th>
						<th style="border: 1px solid #dfdfe1; border-collapse: collapse">次品量</th>
						<th style="border: 1px solid #dfdfe1; border-collapse: collapse">废品量</th>
						<th style="border: 1px solid #dfdfe1; border-collapse: collapse">产品备注</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item, i) in state.infoData.itemList" :key="i">
						<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse">
							{{ ++i }}
						</td>
						<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse">
							<ewt-image :url="item.picUrl" style="width: 36px; height: 36px; object-fit: contain; display: block; cursor: pointer; margin: auto" />
						</td>
						<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse">
							<div>{{ item.skuName || '--' }}</div>
							<div>{{ item.skuCode || '--' }}</div>
						</td>
						<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse">
							{{ item.stockupPlatformName }}
						</td>
						<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse">
							<div>{{ item.mskuCode || '--' }}</div>
							<div>{{ item.fnsku || '--' }}</div>
						</td>
						<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse">
							<template v-if="item.skuAttrs">
								<div v-for="(it, index) in JSON.parse(item.skuAttrs)" :key="index">{{ it.attrKeyName }} : {{ it.attrValue }}</div>
							</template>
						</td>
						<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse">
							{{ item.supposeReceiveQty }}
						</td>
						<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse"></td>
						<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse"></td>
						<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse"></td>
						<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse"></td>
						<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse">{{ item.skuDesc }}</td>
					</tr>
				</tbody>
			</table>
		</div>

		<template #footer>
			<el-button @click="handleClose">取消</el-button>
			<el-button class="ml10" type="primary" @click="toPrint">打印</el-button>
		</template>
	</el-dialog>
</template>
<script setup lang="ts" name="printDialog">
import { inboundOrderDetail } from './api.ts';
import { formatDate } from '/@/utils/formatTime';
import { ElMessage } from 'element-plus';
const { proxy } = getCurrentInstance();
import JsBarcode from 'jsbarcode';
import { useDict } from '/@/hooks/dict';
const { inbound_bus_type } = useDict('inbound_bus_type');
const state = reactive({
	id: '',
	title: '按单打印',
	infoData: {},
	mainInfoList: [
		{ label: '团队', value: 'teamName', isChecked: true },
		{ label: '公司主体', value: 'companyName', isChecked: true },
		{ label: '入库仓库', value: 'whNameTo', isChecked: true },
		{ label: '业务类型：', value: 'busType', isChecked: true },
		{ label: '收货人', value: 'createBy', isChecked: true },
		{ label: '备货区域', value: 'stockupAreaName', isChecked: true },
		{ label: '业务单号', value: 'busCode', isChecked: true },
		{ label: '打印时间', value: 'nowTime', isChecked: true },
		{ label: '物流跟踪号', value: 'logisticsTraceCode', isChecked: true },
		{ label: '备注', value: 'remarks', isChecked: true },
	],
});
const dialogVisible = ref(false);
// 获取详情
const getDetail = async () => {
	try {
		state.loading = true;
		const { data } = await inboundOrderDetail(state.id);
		state.infoData = JSON.parse(JSON.stringify(data));
		state.loading = false;

		nextTick(() => {
			createBarCode();
		});
	} catch (error) {
		ElMessage({
			message: error.msg,
			type: 'error',
		});
	}
};
// 打开弹窗
const openDialog = (id) => {
	state.id = id;
	dialogVisible.value = true;
	getDetail();
};
const createBarCode = () => {
	JsBarcode('#barcode', state.infoData.inboundOrderCode, {
		background: 'transparent',
		format: 'CODE39',
		width: 1,
		height: 50,
	});
};
// 关闭弹窗
const handleClose = () => {
	dialogVisible.value = false;
};
const toPrint = () => {
	const printContent = document.querySelector('#printContent');
	proxy.Print(printContent);
};
defineExpose({
	openDialog,
});
</script>
<style scoped  lang="scss">
.print-title {
	font-size: 24px;
	text-align: center;
	color: #222;
}
.print-box {
	display: flex;
	gap: 36px;
	background-color: #f8f8f8;
	height: 74vh;
}
#printContent {
	flex: 1;
	background-color: #fff;
	padding-right: 20px;
	position: relative;
}
#printContent table th,
#printContent table td {
	font-size: 12px !important;
}
.print-setting {
	width: 260px;
	background-color: #fff;
	padding: 16px;
}
:deep(.el-form) {
	padding: 20px;
}
:deep(.el-form .el-form-item__label) {
	color: #888;
}
:deep(.el-form .el-form-item__content) {
	color: #222;
}
.el-col {
	margin-bottom: 8px;
}
#barcode {
	position: absolute;
	top: -8px;
	right: 10px;
}
.print-setting > p {
	color: #222;
	font-weight: 600;
}
.print-setting > div {
	margin: 10px;
}
.info-tab-title {
	position: relative;
	height: 24px;
	font-size: 14px;
	line-height: 24px;
	font-weight: 600;
	color: #0b1019;
	padding-left: 10px;
	margin-bottom: 20px;
	display: flex;
	&:before {
		content: ' ';
		display: inline-block;
		position: absolute;
		top: 5px;
		left: 0;
		height: 14px;
		width: 2px;
		background: #005bf5;
	}
}
.mainChecks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

th,
td {
	padding: 4px 8px;
	font-size: 14px;
}

@media print {
	:deep(.el-form-item__label) {
		font-size: 12px !important;
		color: #888;
	}
	:deep(.el-form-item__content) {
		font-size: 12px !important;
	}
}
</style>
